<template>
  <div class="right" v-show="customer.length > 0">
    <span class="part-2">{{
      `${title}：${customer[factoryCustomerIndex].customer_name}${customer[factoryCustomerIndex].customer_phone}`
    }}</span>

    <div class="part-3">
      <Popper class="light" arrow>
        <div class="qrocde-pop">
          <img
            class="thumb"
            title="二维码"
            :src="publicUrl(`/images/qrcode-icon.png`)"
          />
        </div>
        <template #content>
          <div
            class="warn-text"
            v-show="!customer[factoryCustomerIndex].qrcode"
          >
            该客服暂无二维码
          </div>
          <img
            v-show="customer[factoryCustomerIndex].qrcode"
            style="width: 1rem; height: 1rem"
            :src="publicUrl(customer[factoryCustomerIndex].qrcode)"
            class="qrcode-img"
          />
        </template>
      </Popper>
      <span class="thumb changeText" @click="changeCustomer">更换</span>
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { ref } from "vue";
import { publicUrl } from "@/utils/util";
import Popper from "vue3-popper";
import { Customer } from "@/interface";
interface Props {
  customer: Array<Customer>;  //客服数据
  title:string;               //平台客服字样     
}

const { customer } = withDefaults(defineProps<Props>(), {
  customer: () => [],
  title:""
});

const factoryCustomerIndex = ref<number>(0);

const changeCustomer = () => {
  factoryCustomerIndex.value =
    factoryCustomerIndex.value !== customer.length - 1
      ? factoryCustomerIndex.value + 1
      : 0;
};
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
